<template>
    <div>
        <el-form class="form" ref="formRef" :model="formModel" :rules="formRules">
            <el-form-item label="团长名称" prop="name" required="">
                <el-input v-model="formModel.name"></el-input>
                <span>名称不能超过30个字</span>
            </el-form-item>
            <el-form-item label="社区店名" prop="communityName" required>
                <el-input v-model="formModel.communityName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNo" required>
                <el-input v-model="formModel.phoneNo"></el-input>
            </el-form-item>
            <el-form-item label="所在地址" prop="address" required>
                <el-input :value="formModel.address" readonly></el-input>
                <div style="margin-top:24px; margin-bottom: 24px;">
                    <!-- <ve-amap :settings="chartSettings" :events="chartEvents"> </ve-amap> -->
                    <fast-map
                        ref="map"
                        :mid="12"
                        :zoom="15"
                        :double-click-zoom="false"
                        @click="onClickMap"
                    >
                    </fast-map>
                </div>
            </el-form-item>
            <el-form-item label="提货地址" prop="deliveryAddress" required>
                <el-input v-model="formModel.deliveryAddress"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onSaveCaptain" type="primary">保存</el-button>
            <el-button @click="onHide">取消</el-button>
        </span>
    </div>
</template>

<script>
import { getCaptain, editCaptain, getAddressByl } from '@/api/captain';
import { formatMoney } from '@/utils/goods';
export default {
    props: {
        visible: {
            type: [Boolean, Object],
            default: false
        },
        edit: {
            type: [Boolean],
            default: true
        },
        headId: {
            type: [String, Object],
            default: null
        }
    },
    data() {
        let self = this;
        this.chartSettings = {
            key: '4b5f2cf2cba25200cc6b68c398468899',
            v: '1.4.4',
            amap: {
                resizeEnable: false,
                center: [121.59996, 31.197646],
                zoom: 10
            }
        };
        this.chartEvents = {
            click: function(e) {
                self.name = e.name;
                console.log(e);
            }
        };

        return {
            zoom: 12,
            center: [121.59996, 31.197646],
            lng: 0,
            lat: 0,
            formModel: {
                id: this.headId,
                adcode: null,
                address: null,
                city: null,
                community: null,
                communityName: null,
                deliveryAddress: null,
                district: null,
                latitude: null,
                longitude: null,
                memberId: null,
                name: null,
                phoneNo: null,
                province: null
            },
            formRules: {
                name: [{ required: true, message: '请填写团长名称', trigger: 'blur' }],
                communityName: [{ required: true, message: '请填写社区店名', trigger: 'blur' }],
                phoneNo: [{ required: true, message: '请填写手机号码', trigger: 'blur' }],
                address: [{ required: true, message: '请选择所在地址', trigger: 'blur' }],
                deliveryAddress: [{ required: true, message: '请填写提货地址', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.fetchDetail(this.headId);
    },
    mounted() {},
    methods: {
        fetchDetail(headId) {
            getCaptain(headId).then(res => {
                if (res.data.success) {
                    this.formModel = res.data.data;
                    this.$set(this.center, 0, res.data.data.longitude);
                    this.$set(this.center, 1, res.data.data.latitude);
                }
            });
        },
        onSaveCaptain() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    editCaptain({
                        ...this.formModel
                    }).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '修改团长信息成功!',
                                type: 'info',
                                duration: 1000
                            });
                            this.$emit('hide');
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 3000
                            });
                        }
                    });
                } else {
                    this.$message({
                        message: '表单填写不正确！',
                        type: 'error',
                        duration: 3000
                    });
                    return false;
                }
            });
        },
        onHide() {
            this.$emit('hide');
        },
        onClickMap(e) {
            // console.log(e.lnglat);
            if (e.lnglat.lng && e.lnglat.lat) {
                this.lng = e.lnglat.lng;
                this.lat = e.lnglat.lat;
                this.formModel.longitude = e.lnglat.lng;
                this.formModel.latitude = e.lnglat.lat;
                getAddressByl({ lng: e.lnglat.lng, lat: e.lnglat.lat }).then(res => {
                    // console.log(res);
                    if (res.status === 200 && res.data.status === '1') {
                        console.log(res.data.regeocode);
                        let data = res.data.regeocode.addressComponent;
                        this.formModel.province = data.province;
                        this.formModel.city =
                            typeof data.city === 'string' ? data.city : data.province;
                        this.formModel.district = data.district;
                        this.formModel.adcode = data.adcode;
                        this.formModel.community = data.township;

                        this.formModel.address = res.data.regeocode.formatted_address;
                    }
                });
            }
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style lang="scss" scoped>
.form {
    height: 600px;
    overflow-y: scroll;
}
.amap-demo {
    height: 300px;
}
</style>
